<template>
	<view>
		<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" backIconSize="40" back-icon-color="#FFFFFF"
		 :background="background">
		</u-navbar>
		<view class="top">
			<view class="packet">
				<view class="title">
					新手红包
				</view>
				<view class="number">
					8 <text>蜜贝</text>
				</view>
				<view class="text1">
					红包使用倒计时
				</view>
				<view class="text2">
					预约抢拍圣女果园时可抵扣
				</view>
				<view class="date">
					<u-count-down class="count-down-demo" :timestamp="timestamp" :showDays="showDays" ref="uCountDown" @end="end"
					 :font-size="fontSize" :color="color" :bg-color="bgColor" :separator-color="separatorColor"></u-count-down>
					<!-- <view class="list">
						16
					</view>
					<view class="dot">
						<view></view>
						<view></view>
					</view>
					<view class="list">
						16
					</view>
					<view class="dot">
						<view></view>
						<view></view>
					</view>
					<view class="list">
						16
					</view> -->
				</view>
			</view>
		</view>
		<view class="play">
		<!-- 	<view class="icon2" @click="toPage('rule')">
				玩法介绍 <image src="../static/g10.png" mode=""></image>
			</view> -->
		</view>
		<view class="content">
			<view class="title">
				<view class="t1"></view>
				<view class="t2"></view>
				<view class="t3"></view>
				<view class="name">
					使用红包流程
				</view>
				<view class="t3"></view>
				<view class="t2"></view>
				<view class="t1"></view>
			</view>
			<view class="up">
				<view class="down">
					<view class="view">
						<view class="name">
							预约圣女果园
						</view>
						<image @click="seeImage('../static/ga3.png')" src="../static/ga3.png" class="img"></image>
					</view>
					<image src="../static/right2.png" class="go"></image>
					<view class="view">
						<view class="name">
							进场后抢拍圣女果园
						</view>
						<image @click="seeImage('../static/gb3.png')" src="../static/gb3.png" class="img"></image>
					</view>
				</view>
			</view>
			<view class="button">
				<u-button :ripple="true" class="b1" @click="toIndex">去预约</u-button>
			</view>
		</view>
		<view class="div"></view>
		
		
		<view class="go_case" @click="toPage('rule')">
			  <image src="../static/case_bg2.png"></image>
		</view>
		
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				timestamp: '',
				showDays: false,
				separatorColor: '#FCE5A2',
				fontSize: '36',
				color: "#CB0908",
				bgColor: "#FEF5D3"
			}
		},
		onLoad(option) {
			than = this;
			var timestamp = Math.round(than.div((new Date()).getTime(), 1000));
			var time = than.add(option.recieve_time, 259200)
			than.timestamp = than.sub(time, timestamp)
			console.log(than.timestamp);
		},
		methods: {
			end() {
				uni.navigateBack();
			},
			toIndex() {
				uni.switchTab({
					url: "../../home/index"
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FF2B49;
	}

	.play {
		position: relative;
		top: 650rpx;
		display: flex;
		height: 100rpx;
		align-items: center;

		.icon2 {
			margin-left: auto;
			margin-right: 40rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.top {
		position: fixed;
		top: 0;
		width: 100%;
		height: 920rpx;
		background-image: url(../static/r1.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;

		.packet {
			margin-top: 160rpx;
			width: 450rpx;
			height: 500rpx;
			text-align: center;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #BF5F2B;
			}

			.number {
				font-size: 160rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 1;
				color: #FF4848;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-top: 75rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF4848;
				}
			}

			.text1 {
				margin-top: 100rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FCE5A2;
			}

			.text2 {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #860F09;
			}

			.date {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				.list {
					width: 64rpx;
					height: 64rpx;
					background: linear-gradient(180deg, #FCE9A8 0%, #FECD75 100%);
					box-shadow: 0px 2rpx 6rpx 0px #FEF5D3;
					border-radius: 12rpx;
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #CB0908;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.dot {
					width: 60rpx;

					view {
						margin: 10rpx auto 10rpx;
						width: 12rpx;
						height: 12rpx;
						background: #FCE5A2;
						box-shadow: 0px 2rpx 6rpx 0px #FEF5D3;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.div {
		height: 30rpx;
		top: 650rpx;
		position: relative;
	}

	.content {
		position: relative;
		top: 650rpx;
		z-index: 1;
		margin: auto;
		width: 680rpx;
		height: 630rpx;
		background: #C90500;
		border-radius: 30rpx;

		.button {
			height: 151rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.b1 {
				width: 314rpx;
				height: 80rpx;
				background: linear-gradient(0deg, #FBDE80, #FDEBA1);
				box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #CC100C;
			}
		}

		.title {
			height: 127rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.name {
				font-size: 48rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #FFFFFF;
				margin: 0 20rpx;
			}

			.t1 {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #FFACAA;
			}

			.t2 {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				margin: 0 20rpx;
				background: #FFACAA;
			}

			.t3 {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: #FFACAA;
			}
		}

		.up {
			display: flex;
			align-items: center;
		}

		.down {
			margin: auto;
			display: flex;
			align-items: center;

			.view {
				.name {
					line-height: 50rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.img {
					width: 227rpx;
					height: 308rpx;
				}
			}

			.go {
				margin: 30rpx 19rpx 0;
				width: 25rpx;
				height: 25rpx;
			}
		}
	}
	
	.go_case{
		position: fixed;
		right: 0rpx;
		z-index: 3;
		top:260rpx;
		image{
			width: 52rpx;
			height: 168rpx;
		}
	}
</style>
